<template>
  <div class="set-up">
    <myHistory
      ref="myHistory"
      :key="Number(`2${keyIndex}`)"
      :keyIndex.sync="keyIndex"
    />
    <mySetting
      ref="mySetting"
      :key="Number(`1${keyIndex}`)"
      :keyIndex.sync="keyIndex"
      @reloadSelect="getInfo"
    />
    <accountDialog
      :treeData="treeData"
      :headTitle="headTitle"
      :key="keyIndex"
      :keyIndex.sync="keyIndex"
      ref="accountDialog"
      @reload="reloadAll"
    />
    <div class="layout">
      <div class="layout-left">
        <div class="header">
          <label>{{ listData[0].name }}</label>
          <el-button size="small" type="primary" @click="add"
            >创建账户</el-button
          >
        </div>
        <div class="main">
          <el-tree
            :data="listData[0].children"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </div>
      <div class="layout-right">
        <div class="header">
          <label>{{ selectData.name }}</label>
          <!-- <el-button
            :disabled="disabled"
            size="small"
            type="primary"
            @click="edit"
            >修改</el-button
          > -->
        </div>
        <div class="main">
          <div class="main-list">
            <label>账户名：</label>
            <span>{{ getInfoData.fAccountTag.name }}</span>
          </div>
          <div class="main-list">
            <label>账户资产：</label>
            <span class="jine">{{
              formatNumber(getInfoData.fAccountTag.accountAmount)
            }}</span>
            <el-button class="history" type="primary" 
            :disabled="!selectData.id"
            size="mini" @click="watchHistory(getInfoData)"
              >历史余额查询</el-button
            >
          </div>
          <div class="main-list">
            <label>类型：</label>
            <span>{{ getInfoData.fAccountTag.type | filType }}</span>
          </div>
          <div class="main-list">
            <label>编码：</label>
            <span>{{ getInfoData.fAccountTag.code }}</span>
          </div>
          <div class="main-list">
            <label>状态：</label>
            <span>{{ getInfoData.fAccountTag.status | filStatus }}</span>
          </div>
          <div class="main-list">
            <label>适用组织：</label>
            <div class="banner">
              <div
                class="banner-list"
                v-for="(item, index) in getInfoData.deptInfoList"
                :key="index"
              >
                {{ item.deptName }}
              </div>
              <i class="icon el-icon-s-tools" @click="setting"></i>
            </div>
          </div>
          <div class="main-list">
            <label>所属组织：</label>
            <span>{{ getInfoData.belongOrgName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import accountDialog from "./components/account_dialog";
import mySetting from "./components/setting";
import request from "@/utils/request";
import toTree from "@/utils/toTree";
import Qs from "qs";
import myHistory from "./components/history"
export default {
  components: {
    accountDialog,
    mySetting,
    myHistory,
  },
  data() {
    return {
      category: 2, ///1:往来账户|2:资金账户|3:标签设置
      listData: [{ name: "" }],
      keyIndex: 1,
      headTitle: "",
      treeData: [],
      getInfoData: {
        deptInfoList: [],
        fAccountTag: {},
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectData: {},
      disabled: true,
    };
  },
  created() {
    this.request();
  },
  filters: {
    filType(val) {
      const data = {
        0: "其他",
        1: "供应商",
        2: "客户",
        3: "资金往来单位",
        4: "分公司账户",
        5: "电子承兑账户",
        6: "项目收入",
        7: "项目支出",
        8: "资金款",
      };
      return data[val] || "--";
    },
    filStatus(val) {
      const data = {
        0: "正常",
        1: "停用",
      };
      return data[val] || "--";
    },
  },
  methods: {
    watchHistory(val){
      this.$refs.myHistory.open(val,this.selectData)
    },
    /*
     * 功能：按千位逗号分割
     * 参数：s，需要格式化的数值.
     * 参数：type,判断格式化后是否需要小数位.
     * 返回：返回格式化后的数值字符串.
     */
    formatNumber(num) {
      if (!num) {
        return "￥" + "0.00";
      }
      let str = String(num).split(".");
      let num1 = str[0];
      let num2 = `${str[1]}`;
      if (str[1]) {
        let data = `${str[1]}`;
        if (data.length > 2) {
          data = data.slice(0, 2);
        }
        if (data.length === 1) {
          data = `${data}0`;
        }
        num2 = `.${data}`;
      } else {
        num2 = ".00";
      }
      let reg = /\d{1,3}(?=(\d{3})+$)/g;
      return "￥" + (num1 + "").replace(reg, "$&,") + `${num2}`;
    },
    async reloadAll() {
      await this.request();
      this.getInfo();
    },
    request() {
      request({
        url: "/system/accountTag/list",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          category: this.category,
        }),
      }).then((res) => {
        console.log(res);
        this.treeData = res.rows.filter((item) => item.parentId === 108);
        // this.listData = toTree(res.rows, "id", "parentId");
        const rows = res.rows.filter((item) => item.status === "0");
        const scrap = res.rows.filter((item) => item.status === "1");
        const listData = toTree(rows, "id", "parentId");
        const scrapList = {
          id: res.rows[res.rows.length - 1].id + 999,
          name: "停用资金账户",
          parentId: 108,
          children: [],
        };
        scrap.forEach((item) => scrapList.children.push(item));
        listData[0].children.push(scrapList);
        this.listData = listData;
      });
    },
    getInfo(val = this.selectData) {
      request({
        url: "/system/accountTag/getInfo",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          category: this.category,
          id: val.id,
        }),
      }).then((res) => {
        console.log(res);
        this.getInfoData = res.data;
      });
    },
    add() {
      console.log(this.selectData);
      this.headTitle = "创建账户";
      this.$refs.accountDialog.open({
        type: "add",
        selectData: this.selectData,
      });
    },
    edit() {
      if (this.selectData.id === 108 || this.selectData.parentId === 108) {
        return;
      }
      this.headTitle = "修改账户";
      this.$refs.accountDialog.open({
        type: "edit",
        selectData: this.selectData,
      });
    },
    handleNodeClick(data) {
      if (data.parentId === 0 || data.parentId === 108) {
        return;
      }
      if (data.id !== 108 && data.parentId !== 108) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
      this.selectData = data;
      this.getInfo(data);
    },
    setting() {
      console.log(this.getInfoData)
      this.$refs.mySetting.open({
        getInfoData: this.getInfoData,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.set-up {
  width: 100%;
  height: calc(100vh - 85px);
  background: rgba(245, 246, 248, 1);
  padding: 10px;

  .jine {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #000 !important;
  }

  .layout {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: auto;
    padding: 10px;

    .header {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .main {
      width: 100%;
      height: calc(100% - 50px);
      border: 1px solid rgba(212, 215, 225, 1);
      overflow: auto;
    }

    &-left {
      width: 400px;
      height: 100%;
    }

    &-right {
      width: calc(100% - 420px);
      height: 100%;

      .main {
        padding: 10px;

        &-list {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin: 20px;

          .history{
            margin-left: 20px;
          }

          label {
            width: 80px;
            font-size: 16px;
            font-family: Microsoft YaHei UI;
            font-weight: bold;
            color: rgba(68, 82, 121, 1);
            text-align: left;
            display: inline-block;
          }

          span {
            font-size: 14px;
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: rgba(68, 82, 121, 0.64);
          }

          .banner {
            width: calc(100% - 80px);
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;

            &-list {
              border: 1px solid rgba(64, 158, 255, 1);
              background: rgba(64, 158, 255, 0.3);
              color: rgba(64, 158, 255, 1);
              padding: 4px 2px;
              margin: 4px;
            }

            .icon {
              margin: 0 10px;
              color: rgba(64, 158, 255, 1);
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
